import React, { Component } from 'react';
import { TextInput, StatusBar, View, Image, Text, TouchableOpacity } from 'react-native';
import { unitWidth, unitHeight, height } from '../constants/AdapterUtil';
import { CodeInput, IconInput, MyInput1, CodeInput2, IconInput2, MyInput3 } from '../components/Input';
import { SubmitButton1 } from '../components/Button';
import TextUtil from '../constants/TextUtil';
import { MyHeader } from '../components/MyHeader';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_account_forget, api_account_verifycode } from '../constants/HttpServices';
import Colors from '../constants/Colors';
import CommonUtil from '../constants/CommonUtil';

export default class ForgetPasswordScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            mobile: '',
            password: '',
            confirmPassword: '',
            code: '',
            verifyCode: '',//校验码

            codeImgUrl: '',
            codeKey: ''
        }
    }

    componentDidMount() {
        CommonUtil.getGraphics({
            success: (response) => {
                this.setState({
                    codeImgUrl: response.result.imgurl,
                    codeKey: response.result.key,
                })
            },
            fail: (response) => {

            }
        })
    }

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center' }}>
                <MyHeader leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} title='忘记密码' />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onPhoneTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*手机号：</Text>
                    }
                    keyboardType='numeric'
                    maxLength={11}
                    placeholder='请输入您的手机号码'
                    value={this.state.mobile} isLast={false} />
                <MyInput3
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onVerifyCodeChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*图形验证码：</Text>
                    }
                    IconChildren={
                        <Image style={{ width: 16 * unitWidth, height: 18 * unitHeight }} source={require('../res/ic_yzm.png')} resizeMode='stretch' />
                    }
                    CodeImage={
                        <TouchableOpacity activeOpacity={0.7} onPress={() => {
                            CommonUtil.getGraphics({
                                success: (response) => {
                                    this.setState({
                                        codeImgUrl: response.result.imgurl,
                                        codeKey: response.result.key,
                                    })
                                },
                                fail: (response) => {

                                }
                            })
                        }}>
                            <Image style={{ width: 80 * unitWidth, height: 32 * unitHeight, backgroundColor: Colors.white }} source={{ uri: this.state.codeImgUrl }} resizeMode='stretch' />
                        </TouchableOpacity>
                    }
                    maxLength={10}
                    placeholder='请输入图片验证码'
                    value={this.state.verifyCode} />
                <CodeInput2 style={{ marginTop: 0 * unitWidth }} verifyCode={this.state.verifyCode}
                    text={this.state.code} phone={this.state.mobile} onChangeText={this.onCodeTextChange.bind(this)} onPress={this.getCode.bind(this)} />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onPasswordTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*新密码：</Text>
                    }
                    maxLength={20}
                    secureTextEntry={true}
                    placeholder='请设置您的密码'
                    value={this.state.password} isLast={false} />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onConfirmPasswordTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*确认新密码：</Text>
                    }
                    maxLength={20}
                    secureTextEntry={true}
                    placeholder='请再次确认您的密码'
                    value={this.state.confirmPassword} isLast={true} />
                <SubmitButton1 style={{ marginTop: 48 * unitWidth }} text='确定' onPress={this.submit.bind(this)} />
            </View >
        )
    }

    onPhoneTextChange(text) {
        let newText = TextUtil.getTextInput(text, 1)
        this.setState({
            mobile: newText
        })
    }

    onVerifyCodeChange(text) {
        this.setState({
            verifyCode: text
        })
    }

    onPasswordTextChange(text) {
        this.setState({
            password: text
        })
    }

    onConfirmPasswordTextChange(text) {
        this.setState({
            confirmPassword: text
        })
    }

    onCodeTextChange(text) {
        this.setState({
            code: text
        })
    }

    getCode() {
        if (this.state.verifyCode == '') {
            show('请输入校验码')
            return false;
        }
        let params = {
            "mobile": this.state.mobile,
            "temp": 'sms_forget',//找回密码：sms_forget，注册：sms_reg
            'imgcodekey': this.state.codeKey,
            'imgcode': this.state.verifyCode
        }
        postFetch(api_account_verifycode, params, {
            success: (response) => {
                show('发送成功');
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
        return true
    }

    submit() {
        if (this.state.mobile == '') {
            show('请输入手机号');
            return;
        } else if (this.state.password == '') {
            show('请输入密码');
            return;
        } else if (this.state.password != this.state.confirmPassword) {
            show('两次输入密码不一致');
            return;
        } else if (this.state.code == '') {
            show('请输入验证码');
            return;
        }
        let params = {
            "mobile": this.state.mobile,
            "pwd": this.state.password,
            'verifycode': this.state.code
        }
        postFetch(api_account_forget, params, {
            success: (response) => {
                show(response.result.message);
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}